<template>
  <div class="app-container">

    <u-page title="会员画像">
      <el-alert
        title="查询方式"
        type="success"
        description="优先级：1.月份必填 2.数据以月为时间单位，仅可选择当月之前时间"
        :closable="false"
      />
      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="选择月份" prop="pickmonth">
            <el-date-picker
              v-model="listQuery.pickmonth"
              value-format="yyyy-MM"
              type="month"
              placeholder="选择月"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
          </el-form-item>
        </el-form>
      </u-filtered>

      <div style="border:#9aaabf 1px solid">
        <!--        <div style="padding: 10px">卡别维度</div>;display: flex-->
        <u-table
          :data="viptypelist"
          :loading="listLoading"
          :options="listOptions"
          :columns="viptypecolumns"
          :pagination.sync="listQuery"
          :page="false"
          :fetch="hdlList"
        />
      </div>

      <span> <br></span>

      <div style="border:#9aaabf 1px solid">
        <u-table
          :data="vipsexlist"
          :loading="listLoading"
          :options="listOptions"
          :columns="vipsexcolumns"
          :pagination.sync="listQuery"
          :page="false"
          :fetch="hdlList"
        />
      </div>
      <span> <br></span>

      <div style="border:#9aaabf 1px solid">
        <u-table
          :data="vipagelist"
          :loading="listLoading"
          :options="listOptions"
          :columns="vipagecolumns"
          :pagination.sync="listQuery"
          :page="false"
          :fetch="hdlList"
        />
      </div>
    </u-page>
  </div>
</template>
<script>
export default {
  data() {
    return {
      api: this.$u.api.DataPlanningvipportraitdata,
      deptList: [],
      list: [],
      nowyearmonth: '',
      datatitle: '',
      // 表格
      viptypecolumns: [
        {
          prop: 'cardtypename',
          label: '卡别',
          width: '200'
        },
        {
          prop: 'vipcustomers',
          label: '客数'
        },
        {
          prop: 'vipturnover',
          label: '销售额'
        },
        {
          prop: 'kd',
          label: '客单'
        },
        {
          prop: 'kszb',
          label: '客数占比'
        },
        {
          prop: 'turnoverzb',
          label: '销售额占比'
        }
      ],
      vipsexcolumns: [
        {
          prop: 'sex',
          label: '性别',
          width: '200'
        },
        {
          prop: 'vipcustomers',
          label: '客数'
        },
        {
          prop: 'vipturnover',
          label: '销售额'
        },
        {
          prop: 'kd',
          label: '客单'
        },
        {
          prop: 'kszb',
          label: '客数占比'
        },
        {
          prop: 'turnoverzb',
          label: '销售额占比'
        }
      ],
      vipagecolumns: [
        {
          prop: 'age',
          label: '年龄段',
          width: 200
        },
        {
          prop: 'vipcustomers',
          label: '客数'
        },
        {
          prop: 'vipturnover',
          label: '销售额'
        },
        {
          prop: 'kd',
          label: '客单'
        },
        {
          prop: 'kszb',
          label: '客数占比'
        },
        {
          prop: 'turnoverzb',
          label: '销售额占比'
        }
      ],
      viptypelist: [],
      vipsexlist: [],
      vipagelist: [],
      listLoading: false,
      listOptions: {
        mutiSelect: false,
        stripe: true
      },
      listQuery: {
        page: 1,
        pageSize: 20,
        totalCount: 1,
        pickmonth: '',
        yearmonth: ''
      }
    }
  },
  created() {},
  mounted() {
  },
  methods: {
    // 搜索事件
    handleFilter() {
      const self = this
      if (self.listQuery.pickmonth === '') {
        self.$message.warning('请选择时间！')
      }
      this.getTime()
      if (self.listQuery.pickmonth >= self.nowyearmonth) {
        self.$message.warning('请选择当月之前月份！')
      } else {
        this.hdlFilter()
      }
    },
    // 获取当前年月
    getTime() {
      const date = new Date() // Fri Oct 29 2021 16:37:56 GMT+0800 (CST)
      const nowyear = date.getFullYear() // 获取完整的年份(4位)
      let nowmonth = date.getMonth() + 1 // 获取当前月份(0-11,0代表1月)
      this.datatitle = nowyear + '年' + nowmonth + '月全馆会员画像'
      if (nowmonth < 10) {
        nowmonth = '0' + nowmonth
      }
      this.nowyearmonth = nowyear + '-' + nowmonth
    },
    /**
     * 查询事件
     */
    hdlFilter() {
      this.listQuery.page = 1
      this.hdlList()
    },
    /**
     * 获取列表数据
     */
    hdlList() {
      const self = this
      // 打开加载状态
      self.listLoading = true
      self.api.list(self.listQuery).then(res => {
        // 获取列表数据
        this.viptypelist = res.data.typeDatas
        this.vipagelist = res.data.ageDatas
        this.vipsexlist = res.data.sexDatas
        // 关闭加载状态
        setTimeout(() => {
          self.listLoading = false
        }, 0.5 * 1000)
      })
    }
  }
}
</script>
<style>
</style>
<style lang="scss" scoped>
.app-container{
  .item >>> .el-form-item__content {
    display: flex;
  }
  .status {
    ::v-deep{
      .el-input{
        width: 140px;
      }
    }
  }
  ::v-deep{
    .el-table-expand {
      font-size: 0;

      label {
        width: 90px;
        color: #99a9bf;
        font-size: 12px;
      }

      .el-form-item{
        margin-bottom: 2px;
        margin-right: 0;
        vertical-align: top;
      }

      .el-form-item__content {
        margin-right: 0;
        margin-bottom: 0;
        font-size: 12px;
        display: inline-block;
        vertical-align: top;
        position: relative;
      }
    }
  }
}
</style>
